<template>
	<div>
      <div style="position: absolute;width: 100%;height: 100%;">
        <div class="process_bg">
        </div>
        <div v-for="info in vueProcessMain.insertArr.value">

          <div :style="{ width: `${info.width}px`,height: `${info.height}px`,
            top: `${info.y}px`,left: `${info.x}px`,backgroundImage:`url(src/assets/images/process/${info.status}.png)`,
            backgroundPosition:`-${info.x}px -${info.y}px` }"
            class="process_children_img"
            @click="vueProcessMain.btnClick(info.id)"
            v-if="info.type == 'img'"
          >
          </div>


          <div :style="{ 
            width: `${info.width}px`,height: `${info.height}px`,
            top: `${info.y}px`,left: `${info.x}px`, color: `${info.color}` ,
            fontFamily:`${info.font}`,fontSize:`${info.fontSize}px`
            }"
            class="process_children_txt"
            v-if="info.type == 'txt'"
          >
            <div>{{info.str}}{{info.unit}}</div>
          </div>

          <animationImg v-if="info.type == 'ani'" :info="info" />
          
        </div>
        <el-button @click="vueProcessMain.fullScreen" style="position: absolute;z-index: 100;">全屏</el-button>
        <el-button @click="vueProcessMain.btnClick" style="position: absolute; margin-left: 80px;z-index: 100;">弹框</el-button>
      </div>



      <!-- 弹框 -->
      <!-- <el-dialog
        v-model="vueProcessMain.dialogVisible.value"
        title="操作"
        width="30%"
        destroy-on-close
        center
      >
        <span
          >点击了设备</span
        >
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="vueProcessMain.dialogVisible.value = false">取消</el-button>
            <el-button type="primary" @click="vueProcessMain.dialogVisible.value = false"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog> -->
      <ly-dialog v-model="vueProcessMain.dialogVisible.value" title="你好" />
      
  </div>
</template>
<script setup lang="ts">

import animationImg from './animationImg.vue';

import VueProcessMain from './VueProcessMain';
let vueProcessMain = new VueProcessMain()

</script>
<style scoped>
  .process_bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/images/process/bg.png);
    background-repeat:no-repeat;
  }

  .process_children_img{
    position: absolute;
    z-index: 99;
  }

  .process_children_txt{
    position: absolute;
    z-index: 98;
    user-select: none;
    justify-content: center;
    display: flex;
    align-items: center;
  }

</style>
